<template>
  <div id="singerDetail">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="container">
          <div class="personal-desc">
            <div
              class="images"
              :style="{
                backgroundImage: 'url(' + sinerDetail.artist.cover + ')',
              }"
            ></div>
            <div class="artist-desc">
              <p class="name">{{ sinerDetail.artist.name }}</p>
              <div class="btns">
                <div class="btn"><i class="el-icon-folder-add"></i>收藏</div>
                <div class="btn"><i class="el-icon-user"></i>个人主页</div>
              </div>
              <div class="count">
                <p>单曲数：{{ sinerDetail.artist.musicSize }}</p>
                <p>专辑数：{{ sinerDetail.artist.albumSize }}</p>
                <p>MV数：{{ sinerDetail.artist.mvSize }}</p>
              </div>
            </div>
          </div>
          <div class="tab">
            <div class="tab-btn">
              <p
                class="btn-item"
                :class="{ active: tab === 0 }"
                @click="tab = 0"
              >
                专辑
              </p>
              <p
                class="btn-item"
                :class="{ active: tab === 1 }"
                @click="tab = 1;getMV()"
              >
                MV
              </p>
              <p
                class="btn-item"
                :class="{ active: tab === 2 }"
                @click="tab = 2;getDesc()"
              >
                歌手详情
              </p>
              <p
                class="btn-item"
                :class="{ active: tab === 3 }"
                @click="tab = 3;getSimil()"
              >
                相似歌手
              </p>
            </div>
            <div class="tab-icon" v-show="tab === 0">
              <div
                class="icon"
                :class="{ active: icon === 0 }"
                @click="icon = 0"
              >
                <i class="el-icon-menu"></i>
              </div>
              <div
                class="icon"
                :class="{ active: icon === 1 }"
                @click="icon = 1"
              >
                <i class="el-icon-s-unfold"></i>
              </div>
              <div
                class="icon"
                :class="{ active: icon === 2 }"
                @click="icon = 2"
              >
                <i class="el-icon-s-operation"></i>
              </div>
            </div>
          </div>
          <div class="album-content" v-show="tab===0 && icon===2">
            <div class="album">
              <div class="images top">
                <img src="../../../assets/images/singerHot.png" alt="" />
              </div>
              <div class="right">
                <div class="title">
                  <p>热门50首</p>
                  <i class="el-icon-video-play" @click="addList()"></i>
                  <el-divider direction="vertical"></el-divider>
                  <i class="el-icon-folder-add"></i>
                </div>
                <ul class="song-list">
                  <li
                    v-for="(item, index) in top"
                    :key="index"
                    v-if="index < topNum"
                    @click="play(item)"
                  >
                    <div class="left">
                      <p class="num">
                        {{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}
                      </p>
                      <Icon type="ios-heart-outline" />
                      <Icon type="ios-download-outline" />
                      <p class="name">{{ item.name }}</p>
                      <p class="sq">SQ</p>
                      <p
                        class="mv"
                        v-show="item.mv"
                        @click="skipMv({ id: item.mv })"
                      >
                        MV
                      </p>
                    </div>
                    <p class="time">
                      {{
                        Math.floor(item.dt / 1000 / 60) < 10
                          ? "0" + Math.floor(item.dt / 1000 / 60)
                          : Math.floor(item.dt / 1000 / 60)
                      }}:{{
            Math.floor((item.dt / 1000) % 60) &lt; 10 ? '0' +(Math.floor((item.dt / 1000) % 60)):Math.floor((item.dt / 1000) % 60)
                      }}
                    </p>
                  </li>
                  <li class="all" v-show="allShow === true">
                    <div></div>
                    <p
                      @click="
                        topNum = 50;
                        allShow = false;
                      "
                    >
                      查看全部50首<i class="el-icon-arrow-right"></i>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="album" v-for="(item, index) in sinerAblum" :key="index">
              <div class="left">
                <div class="images"><img v-lazy="item.picUrl" alt="" /></div>
                <p>{{ new Date(item.publishTime).toLocaleDateString() }}</p>
              </div>
              <div class="right">
                <div class="title">
                  <p>{{ item.name }}</p>
                  <i
                    class="el-icon-video-play"
                    @click="addListAlbum(index)"
                  ></i>
                  <el-divider direction="vertical"></el-divider>
                  <i class="el-icon-folder-add"></i>
                </div>
                <ul class="song-list">
                  <li
                    v-for="(item, index) in ablumDetail[index]"
                    :key="index"
                    v-if="index < topNum"
                    @click="play(item)"
                  >
                    <div class="left">
                      <p class="num">
                        {{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}
                      </p>
                      <Icon type="ios-heart-outline" />
                      <Icon type="ios-download-outline" />
                      <p class="name">{{ item.name }}</p>
                      <p class="sq">SQ</p>
                      <p
                        class="mv"
                        v-show="item.mv"
                        @click="skipMv({ id: item.mv })"
                      >
                        MV
                      </p>
                    </div>
                    <p class="time">
                      {{
                        Math.floor(item.dt / 1000 / 60) < 10
                          ? "0" + Math.floor(item.dt / 1000 / 60)
                          : Math.floor(item.dt / 1000 / 60)
                      }}:{{
                        Math.floor((item.dt / 1000) % 60) &lt; 10 ? '0' +(Math.floor((item.dt / 1000) % 60)):Math.floor((item.dt / 1000) % 60)
                      }}
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="mv-content" v-show="tab===1">
            <ul class="mv-list">
              <li v-for="(item, index) in mvArr" :key="index" @click="skipMv({ id: item.id })">
                <div class="images">
                  <img :src="item.imgurl" alt="">
                  <p class="icon"><Icon type="ios-play-outline" />{{item.playCount>10000?Math.floor(item.playCount/10000)+"万":item.playCount}}</p>
                  <p class="time">
                     {{
                        Math.floor(item.duration / 1000 / 60) < 10
                          ? "0" + Math.floor(item.duration / 1000 / 60)
                          : Math.floor(item.duration / 1000 / 60)
                      }}:{{
                        Math.floor((item.duration / 1000) % 60) &lt; 10 ? '0' +(Math.floor((item.duration / 1000) % 60)):Math.floor((item.duration / 1000) % 60)
                      }}
                    </p>
                </div>
                <p class="name">{{item.name}}</p>
              </li>
            </ul>
          </div>
          <div class="singerdetail" v-show="tab===2">
            <p class="detail-title">{{sinerDetail.artist.name}}简介</p>
            <p class="detail-content">{{singerDesc.briefDesc}}</p>
            <div class="introduction" v-for="(item, index) in singerDesc.introduction" :key="index">
              <p class="detail-title">{{item.ti}}</p>
            <p class="detail-content">{{item.txt}}</p>
            </div>
          </div>
          <div class="simil-singer" v-show="tab===3">
            <ul class="simil-list">
              <li v-for="(item, index) in similSinger" :key="index" @click="skipSingerDetail(item)">
                <div class="images">
                  <img :src="item.img1v1Url" alt="">
                </div>
                <p class="name">{{item.name}}</p>
              </li>
            </ul>
          </div>
            <ul class="ablum-list" v-show="icon===1">
              <li v-for="(item, index) in sinerAblum" :key="index">
                <div class="left">
                  <div class="images"><img :src="item.picUrl" alt=""></div>
                  <p class="name">{{item.name}}</p>
                </div>
                <p class="count">{{item.size}}首</p>
                <p class="up-time">发行时间：{{new Date(item.publishTime).toLocaleDateString()}}</p>
              </li>
            </ul>
            <ul class="ablum-chart" v-show="icon===0">
              <li v-for="(item, index) in sinerAblum" :key="index">
                <div class="images"><img :src="item.picUrl" alt=""></div>
                <p class="name">{{item.name}}</p>
                <p class="up-time">{{new Date(item.publishTime).toLocaleDateString()}}</p>
              </li>
            </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "singerDetail",
  data() {
    return {
      icon: 2,
      tab: 0,
      sinerDetail: {},
      sinerAblum: [],
      top: [],
      topNum: 10,
      allShow: true,
      ablumDetail: [],
      //mv数据
      mvArr:[],
      //歌手描述
      singerDesc:{},
      //相似歌手
      similSinger:[],
    };
  },
  methods: {
    // //跳转至歌单列表
    // skip(item) {
    //   this.$router.push({
    //     path: "/homepage/contents/rankdetail",
    //     query: {
    //       detail: item,
    //       id: item.id,
    //     },
    //   });
    // },
     //跳转详情页
    skipSingerDetail(item){
      this.$router.push({
        path:"/homepage/contents/singerDetail",
        query:{
          id:item.id
        }
      })
      location.reload()
    },
    //得到相似歌手数据
    getSimil(){
       this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/simi/artist?timetamp=" + new Date().getTime(),
        params: {
          id: this.$route.query.id,
        },
      }).then(res=>{
        this.similSinger = res.data.artists
        console.log("相似歌手",res.data);
      })
    },
    //歌手描述
    getDesc(){
       this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/artist/desc?timetamp=" + new Date().getTime(),
        params: {
          id: this.$route.query.id,
        },
      }).then(res=>{
        this.singerDesc = res.data
        console.log("歌手描述",res.data);
      })
    },
    //得到mv数据
    getMV(){
       this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/artist/mv?timetamp=" + new Date().getTime(),
        params: {
          id: this.$route.query.id,
        },
      }).then(res=>{
        this.mvArr = res.data.mvs
        console.log("mv数据",res.data);
      })
    },
    //跳转mv
    skipMv(item) {
      this.$router.push({
        path: "/mv",
        query: {
          list: JSON.stringify(item),
        },
      });
    },
    //top50全部播放
    addList() {
      this.$store.state.playMusicList.push(...this.top);
      let obj = {};
      this.$store.state.playMusicList = this.$store.state.playMusicList.reduce(
        function (item, next) {
          obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
          return item;
        },
        []
      );
      console.log("添加歌单成功", this.$store.state.playMusicList);
    },
    //播放全部
    addListAlbum(index) {
      this.$store.state.playMusicList.push(...this.ablumDetail[index]);
      let obj = {};
      this.$store.state.playMusicList = this.$store.state.playMusicList.reduce(
        function (item, next) {
          obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
          return item;
        },
        []
      );
      console.log("添加歌单成功", this.$store.state.playMusicList);
    },
    //播放相关
    play(item) {
      document
        .getElementsByClassName("audio-play")[0]
        .classList.add("audio-stop");
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: item.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: item.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);
          this.currentMusic = res.data.songs[0];
          this.$store.state.nowMusic = this.currentMusic;
          this.$store.state.playMusicList.push(this.currentMusic);
          //数组对象去重
          let obj = {};
          this.$store.state.playMusicList = this.$store.state.playMusicList.reduce(
            function (item, next) {
              obj[next.id] ? "" : (obj[next.id] = true && item.push(next));

              return item;
            },
            []
          );
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveLyric", res.data.lrc.lyric);
            console.log("歌词存储成功");
          });
          //评论获取
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/comment/music?timetamp=" +
              new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveComment", res.data);
            console.log("歌曲评论储存成功", this.$store.state.songcomment);
          });
          console.log("添加歌单成功", this.$store.state.playMusicList);
          console.log("仓库现在的音乐", this.$store.state.nowMusic);
        });
        console.log(res.data);
        let aud = document.getElementsByTagName("audio")[0];
        aud.setAttribute("src", res.data.data[0].url);
        aud.play();
      });
    },
  },
  created() {
    //获取歌手详情
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/artist/detail?timetamp=" +
        new Date().getTime(),
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.sinerDetail = res.data.data;
      console.log("详情", res.data);
    });

    //获取歌手专辑
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/artist/album?timetamp=" + new Date().getTime(),
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      let _this = this
      this.sinerAblum = res.data.hotAlbums;
      console.log("歌手专辑", res.data);
      //for循环异步请求专辑内容
      async function getNews(index) {
        return new Promise((resolve, reject) => {
          //专辑内容
          _this.axios({
            method: "get",
            withCredentials: true,
            url:
              "https://music.hzbiz.net/album?timetamp=" + new Date().getTime(),
            params: {
              id: index,
            },
          }).then((res) => {
            _this.ablumDetail.push(res.data.songs);
            resolve()
            console.log("专辑内容", _this.ablumDetail);
          });
        });
      }
      async function sendXml() {
        for (let index = 0; index < res.data.hotAlbums.length; index++) {
          const element = res.data.hotAlbums[index];
          await getNews(element.id);
        }
      }
      sendXml();
    });
    //top50
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/artist/top/song?timetamp=" +
        new Date().getTime(),
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.top = res.data.songs;
      console.log("top50", res.data);
    });
  },
};
</script>

<style scoped>
.container {
  padding: 0 30px;
}
.personal-desc {
  display: flex;
}
.personal-desc .images {
  width: 185px;
  height: 185px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 125%;
  margin-right: 15px;
}
.personal-desc .artist-desc {
  width: 80%;
}
.personal-desc .artist-desc p.name {
  font-size: 24px;
  font-weight: bold;
  color: #000;
}
.personal-desc .artist-desc .btns {
  display: flex;
  margin-top: 10px;
}
.personal-desc .artist-desc .btns .btn {
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
}
.personal-desc .artist-desc .btns .btn:hover {
  background-color: #f5f5f5;
}
.personal-desc .artist-desc .btns .btn > i {
  font-size: 18px;
  margin-right: 5px;
}
.personal-desc .artist-desc .count {
  display: flex;
  margin-top: 20px;
}
.personal-desc .artist-desc .count p {
  margin-right: 20px;
}
.tab {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.tab .tab-btn {
  display: flex;
  cursor: pointer;
}
.tab .tab-btn p {
  margin-right: 25px;
  padding: 5px 0;
  line-height: 24px;
}
.tab .tab-btn p.active {
  color: #000;
  font-weight: bold;
  border-bottom: 2px solid #ec4141;
}
.tab .tab-icon {
  display: flex;
}
.tab .tab-icon .icon {
  margin-right: 1px;
  width: 28px;
  height: 24px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.tab .tab-icon .icon.active {
  background-color: #b9b9b9;
}
.tab .tab-icon .icon:first-child {
  border-radius: 3px 0 0 3px;
}
.tab .tab-icon .icon:last-child {
  border-radius: 0 3px 3px 0;
}
.album {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
}
.album .images {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.album .left > p {
  margin-top: 5px;
}
.album .top img {
  width: 105%;
}
.album .right {
  width: 86%;
}
.album .right > .title {
  display: flex;
  align-items: center;
}
.album .right > .title p {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-right: 20px;
}
.album .right > .title i {
  font-size: 22px;
  cursor: pointer;
}
.album .right > .title i:hover {
  color: #000;
}
.song-list {
  margin-top: 10px;
}
.song-list li {
  height: 35px;
  cursor: pointer;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
}
.song-list li .left {
  display: flex;
  align-items: center;
}
.song-list li:nth-child(2n-1) {
  background-color: #f5f5f5;
}
.song-list li:hover {
  background-color: #ebe9e9;
}
.song-list li p.num {
  margin-right: 10px;
  color: rgb(168, 164, 164);
  opacity: 0.5;
}
.song-list li.all {
  font-size: 12px;
  color: rgb(156, 154, 154);
}
.song-list li.all p:hover {
  color: rgb(66, 66, 66);
}
.song-list li .left i {
  font-size: 16px;
  margin-right: 10px;
}
.song-list li .left p {
  margin-right: 15px;
}
.song-list li .left .sq,
.song-list li .left .mv {
  font-size: 12px;
  margin-right: 10px;
  color: #ec4141;
  border: 1px solid #ec4141;
  padding: 0 1px;
  border-radius: 3px;
}
.song-list li .left .mv {
  cursor: pointer;
}
.song-list li p.time {
  color: rgb(170, 169, 169);
  margin-right: 130px;
}
.mv-list{
  display: flex;
  flex-wrap: wrap;
}
.mv-list li{
  width: 300px;
  margin-bottom: 25px;
  cursor: pointer;
}
.mv-list li:not(:nth-child(5n)){
  margin-right: 20px;
}
.mv-list li .images{
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.mv-list li p.name{
  margin-top: 10px;
}
.mv-list li .images p{
  position: absolute;
  color: #ffffff;
}
.mv-list li .images p.icon{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  top: 0;
  width: 100%;
  padding: 5px 5px 15px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.2),transparent)
}
.mv-list li .images p.time{
  width: 100%;
  bottom: 0px;
  padding: 3px 5px;
  text-align: right;
  background:linear-gradient(to top,rgba(0,0,0,0.3),transparent)
}
.singerdetail p.detail-title{
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.singerdetail p.detail-content{
  text-indent: 2em; 
  color: rgb(131, 129, 129);
  line-height: 23px;
  word-spacing: 3px;
  letter-spacing: 2px;
  margin-bottom: 30px;
}
.simil-list{
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.simil-list li{
  cursor: pointer;
  width: 310px;
  margin-right: 11px;
}
.simil-list li .images{
  height: 310px;
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.simil-list li p.name{
  margin-top: 7px;
  margin-bottom: 20px;
}
.ablum-list{
margin-top: 10px;
}
.ablum-list li:nth-child(2n-1){
  background-color: #f5f5f5;
}
.ablum-list li{
display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 5px 0;
  cursor: pointer;
}
.ablum-list li:hover{
  background-color: rgb(226, 226, 226);
}
.ablum-list li .left{
  display: flex;
  align-items: center;
  width: 40%;
}
.ablum-list li .left .images{
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-right: 5px;
}
.ablum-list li p.count{
  width: 30%;
  display: flex;
  align-items: center;
  color: #a8a8a8;
  font-size: 12px;
}
.ablum-list li p.up-time{
  width: 20%;
  display: flex;
  align-items: center;
  color: #a8a8a8;
  font-size: 12px;
}
.ablum-chart{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ablum-chart li{
  width: 240px;
  cursor: pointer;
  margin-bottom: 30px;
}
.ablum-chart li:not(:nth-child(6n)){
  margin-right: 33px;
}
.ablum-chart li .images{
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ablum-chart li p.name{
  margin: 10px 0;
}
.ablum-chart li p.up-time{
  color: rgb(185, 185, 185);
  font-size: 12px;
}
</style>